<template>
	
	<div :class="className" :style="{height:height,width:width}" />
</template>

<script>
	import echarts from 'echarts'
	require('echarts/theme/macarons') // echarts theme
	import { debounce } from '@/utils'

	export default {
		props: {
			className: {
				type: String,
				default: 'chart'
			},
			width: {
				type: String,
				default: '800px'
			},
			height: {
				type: String,
				default: '400px'
			},
			autoResize: {
				type: Boolean,
				default: true
			},
			chartData: {
				type: Object,
				required: true
			}
		},
		data() {
			return {
				chart: null,
				sidebarElm: null
			}
		},
		watch: {
			chartData: {
				deep: true,
				handler(val) {
					this.setOptions(val)
				}
			}
		},
		mounted() {
			this.initChart()
			if(this.autoResize) {
				this.__resizeHandler = debounce(() => {
					if(this.chart) {
						this.chart.resize()
					}
				}, 100)
				window.addEventListener('resize', this.__resizeHandler)
			}

			// 监听侧边栏的变化
			this.sidebarElm = document.getElementsByClassName('sidebar-container')[0]
			this.sidebarElm && this.sidebarElm.addEventListener('transitionend', this.sidebarResizeHandler)
		},
		beforeDestroy() {
			if(!this.chart) {
				return
			}
			if(this.autoResize) {
				window.removeEventListener('resize', this.__resizeHandler)
			}

			this.sidebarElm && this.sidebarElm.removeEventListener('transitionend', this.sidebarResizeHandler)

			this.chart.dispose()
			this.chart = null
		},
		methods: {
			sidebarResizeHandler(e) {
				if(e.propertyName === 'width') {
					this.__resizeHandler()
				}
			},
			setOptions({
				expectedData,
				actualData
			} = {}) {
				this.chart.setOption({
					 
					xAxis: {
						data: ['1', '2', '3', '4', '5', '6', '7'],
						boundaryGap: false,
						axisTick: {
							show: false
						}
					},
					grid: {
						left: 10,
						right: 10,
						bottom: 20,
						top: 30,
						containLabel: true
					},
					tooltip: {
						trigger: 'axis',
						axisPointer: {
							type: 'cross'
						},
						padding: [5, 10]
					},
					yAxis: {
						axisTick: {
							show: false
						}
					},
					legend: {
						data: ['销售量', '利润', '库存']
					},
					series: [{
							name: '销售量',
							itemStyle: {
								normal: {
									color: '#FF005A',
									lineStyle: {
										color: '#FF005A',
										width: 2
									}
								}
							},
							smooth: true,
							type: 'line',
							data: [820, 932, 901, 934, 1290, 1330, 1320],
							animationDuration: 2800,
							animationEasing: 'cubicInOut'
						},
						{
							name: '利润',
							itemStyle: {
								normal: {
									color: '#B3EE3A',
									lineStyle: {
										color: '#B3EE3A',
										width: 2
									}
								}
							},
							smooth: true,
							type: 'line',
							data: [620, 711, 823, 934, 1445, 1456, 1178],
							animationDuration: 2800,
							animationEasing: 'cubicInOut'
						},
						{
							name: '库存',
							smooth: true,
							type: 'line',
							itemStyle: {
								normal: {
									color: '#3888fa',
									lineStyle: {
										color: '#3888fa',
										width: 2
									},
									areaStyle: {
										color: '#f3f8ff'
									}
								}
							},
							type: 'line',
							data: [612, 920, 1140, 1160, 1190, 1234, 1321],
							animationDuration: 2800,
							animationEasing: 'quadraticOut'
						}
					]
				})
			},
			initChart() {
				this.chart = echarts.init(this.$el, 'macarons')
				this.setOptions(this.chartData)
			}
		}
	}
</script>